<script setup lang="ts" name="app-ha">
import { onMounted, ref, onUnmounted } from "vue";
import { RouterLink, RouterView } from "vue-router";
import Music from "./components/common/Music.vue";
import theme from "./components/common/theme.vue";
import { ElButton } from "element-plus";
// Element Plus
import "element-plus/theme-chalk/index.css"; // 引入组件样式
let title = ref("long time no see");
let data = {
  phonemodel: "",
  playurl:
    "http://ws.stream.kg.qq.com/njc-kgsvp/njc_0_50111_1021_13c035e97bf926ab547e47ef83f99afc7a8163ac.f0.m4a?vkey=CB785047EC5D5CB9DE4D4823511505CF05FDA081C868784CC956495FBC0389771BAEC5F2C038633F5E6ACA59A357C13C747BAC77380D26703B91ADB6F7B7D381FB600D7ED5E953626417426A1875A8213E86510FBB62343B&dis_k=6dac81bdaedd3ccdf2ad25441eb40e62&dis_t=1708072332&fromtag=1021&ugcid=270656622_1553493314_688&nr=1",
  play_num: 78327,
  pic: "http://pic.kg.qq.com/ttkg/0/6dc035e97bf926ab047e47ef83f9fafc59816eae/200?bj=aHR0cHM6Ly95Lmd0aW1nLmNuL211c2ljL3Bob3RvX25ldy9UMDAyUjMwMHgzMDBNMDAwMDAxQnZZWmkwQ1RlZGsuanBnP21heF9hZ2U9MjU5MjAwMCsxN0FGRDJFOTRDQjRFRThGNEI2QjgzNUM1RDc2QUNCMg%3D%3D",
  song_name: "再见",
  kg_nick: "温书琴Wendy",
};

const fullscreenElement = ref(null);
const isFullscreen = ref(false);
let elem = document.documentElement;
const enterFullscreen = () => {
  console.log("Enter Fullscreen");
  // document.documentElement
  // 检查 fullscreenElement.value 是否为非 null
  if (!document.fullscreenElement && elem.requestFullscreen) {
    elem
      .requestFullscreen()
      .then(() => {
        isFullscreen.value = true;
      })
      .catch((err) => {
        console.error("全屏请求失败：", err);
      });
  }
};

const exitFullscreen = () => {
  if (document.exitFullscreen) {
    document
      .exitFullscreen()
      .then(() => {
        isFullscreen.value = false;
      })
      .catch((err) => {
        console.error("退出全屏失败：", err);
      });
  }
};

const handleFullscreenChange = () => {
  isFullscreen.value = document.fullscreenElement !== null;
};

onMounted(() => {
  document.addEventListener("fullscreenchange", handleFullscreenChange);
});

onUnmounted(() => {
  document.removeEventListener("fullscreenchange", handleFullscreenChange);
});
</script>
<template>
  <header class="flex">
    <!-- v-beauty自定义指令  -->
    <h3 v-beauty="title">{{ title }}</h3>
    <h3>全局对象 ：{{ globalX }}</h3>
    <Music class="flex" :data="data"></Music>
    <theme></theme>
    <!-- <div ref="fullscreenElement" class="fullscreen-container">
      <h1>全屏示例</h1>
      <button @click="enterFullscreen">进入全屏</button>
      <button @click="exitFullscreen" v-if="isFullscreen">退出全屏</button>
    </div> -->
  </header>
  <div>
    <!--   路由链接，点击是路由地址会切换到属性 to 的地方   -->
    <router-link to="/" active-class="link">首页(vue模块)</router-link>
    |
    <router-link replace to="/love" active-class="link"
      >love(pinia模块)</router-link
    >
    |
    <router-link to="/news" active-class="link">news(路由模块)</router-link>
    |
    <router-link to="/sub" active-class="link">sub(消息模块)</router-link>
    |
    <router-link to="/shallow" active-class="link">shallow 模块</router-link>
    |
    <router-link to="/teleport" active-class="link">teleport 模块</router-link>
    |
    <router-link to="/suspense" active-class="link">suspense 模块</router-link>

    <hr />
  </div>
  <main ref="fullscreenElement" class="fullscreen-container">
    <h1>
      <el-button @click="enterFullscreen" v-if="!isFullscreen">进入全屏</el-button>
      <el-button @click="exitFullscreen" v-else>退出全屏</el-button>
    </h1>
    <!--   路由试图，路由切换组件的地方   -->
    <router-view />
  </main>
</template>

<style scoped lang="scss">
h1 {
  position: absolute;
  right: 10px;
  top: 10px;
}
.fullscreen-container {
  width: 100%;
  height: 100vh;
}
header {
  line-height: 1.5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  @include useTheme {
    background: getValue("bgColor") !important;
    color: getValue("textColor") !important;
  }
}

.img {
  height: 20px;
  width: 20px;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
    height: 20px;
    width: 20px;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
